<!-- 
 * 智能匹配组件----成果
 * @author: 
 * @since: 2022-05-31
 * index.vue
-->
<template>
  <div class="achievement-detail-container detailsPageBox p20">
    <div class="detailsMain">
      <div class="achievement">
        <div class="title">成果方</div>
        <div class="info">
          <div class="item">
            <div class="key">成果名称：</div>
            <div class="value name" @click="goDetail(1)">{{ state.detailsData.needTitle }}</div>
          </div>
          <div class="item">
            <div class="key">成果联系人：</div>
            <div class="value">{{ state.detailsData.needContactPerson }}</div>
          </div>
          <div class="item">
            <div class="key">联系电话：</div>
            <div class="value">{{ state.detailsData.needContactPhone }}</div>
          </div>
        </div>
      </div>
      <div class="demand">
        <div v-if="state.abutmentList">
          <div v-if="state.abutmentList.SYSTEM_LIBRARY && state.abutmentList.SYSTEM_LIBRARY.length > 0">
            <div class="title">意向对接需求</div>
            <div class="list">
              <div class="list-item" v-for="(item, index) in state.abutmentList.SYSTEM_LIBRARY" :key="index" @mouseover="enterDemandItem(item, index)" @mouseout="leaveDemandItem(item, index)">
                <div class="box">
                  <div class="item">
                    <div class="key">需求名称：</div>
                    <div class="value name" @click="goDetail(2, item)">{{ item.supplyTitle }}</div>
                  </div>
                  <div class="item">
                    <div class="key">需求联系人：</div>
                    <div class="value">{{ item.supplyContactPerson }}</div>
                  </div>
                  <div class="item">
                    <div class="key">联系电话：</div>
                    <div class="value">{{ item.supplyContactPhone }}</div>
                  </div>
                  <div class="item">
                    <div class="key">匹配度：</div>
                    <div class="value">{{ item.similar }}</div>
                  </div>
                </div>
                <div class="del" v-show="state.currentDemandIndex === index" @click="delAchievement(item)">
                  <svg-icon name="shanchu" size="16" color="#fff" class="icon"></svg-icon>
                  <span class="word">删除</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-button size="130px" class="addBtn" @click="addMatchAchievement">+添加匹配结果</el-button>
      </div>
    </div>
    <el-dialog v-model="isShowDialog" title="添加对接结果" width="750px" :before-close="closeDialog">
      <div class="fitAchievement" v-if="state.fitAchievementList && state.fitAchievementList.length > 0">
        <el-checkbox-group v-model="state.checkedList" @change="checkbox">
          <el-checkbox :label="item.id" v-for="item in state.fitAchievementList" :key="item.id" size="large" @change="getCheckModel(item)">
            <div @click="clcikText(item, $event)">{{ item.demandTitle }}</div>
          </el-checkbox>
        </el-checkbox-group>
        <div class="pagination">
          <el-pagination background :currentPage="state.pagination.currentPage" :page-size="state.pagination.size" :total="state.pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="state.pagination.currentPage" layout="total,sizes,prev, pager, next,jumper" :page-sizes="[10, 20, 30, 40]"></el-pagination>
        </div>
      </div>
      <div class="emptyData" v-else>暂无数据</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="add" size="mini" v-if="state.checkedList.length > 0">确认添加</el-button>
          <el-button @click="closeDialog" size="mini" v-if="state.checkedList.length > 0">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="isShowDetail" title="查看详情" width="750px">
      <DemandContent :id="state.currentId" type="" />
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { getDetailsByIdApi, delAbutmentResultApi, matchScientificDemandApi, addMatchApi } from '@/api/interface/match.js'
import { sessionstorage } from '@/utils/storage.js'
import { ElMessageBox } from 'element-plus'
import { successHandle } from '@/utils/common.js'
import { useRouter } from 'vue-router';
const router = useRouter();

const state = reactive({
  currentDemandIndex: null,
  fitAchievementList: [],//可能合适的需求
  checkedList: [],//弹窗选择的数据
  achievementItem: {},//成果数据(从列表过来的数据)
  detailsData: {},
  currentDelSupplyId: '',//当前删除的对接结果id
  paramsList: [],//实际给后端传的数据
  abutmentList: {},//对接数据
  pagination: {//分页
    currentPage: 1,
    size: 10,
    total: 0
  },
  currentId: '',
})
const isShowDialog = ref(null)

const isShowDetail = ref(null)

onMounted(() => {
  state.achievementItem = sessionstorage.get('achievementItem')
  if (state.achievementItem.id) {
    getDetailsById()
  }
})
//选择对接结果数据
const getCheckModel = (data) => {
  state.paramsList = handleCheckData(state.fitAchievementList, state.checkedList, data, state.paramsList)
}
//处理选择的数据
const handleCheckData = (arr, selectList, currentData, arr2) => {
  arr.forEach(item => {
    if (item.id === currentData.id) {
      item.isSelect = !item.isSelect
    }
  })
  selectList.forEach(id => {
    if (id == currentData.id) {
      arr2.push(currentData)
    }
  })
  arr2 = arr2.filter(item => item.isSelect)
  return arr2
}

//点击对接结果中的文本
const clcikText = (item, e) => {
  e.preventDefault()
  state.currentId = item.id
  isShowDetail.value = true
}
//跳转去详情
const goDetail = (type, data) => {
  if (type == 1) {
    router.push({ name: 'AchieveDetail', params: { id: state.achievementItem.id, type: "detail" } })
  } else {
    router.push({ name: 'NeedDetail', params: { id: data.supplyId, type: "detail" } })
  }
}

//表格中的多选
const checkbox = (val) => {
  state.checkedList = val
}
//获取智能匹配科技成果
const matchScientificDemand = () => {
  const params = {
    id: state.achievementItem.id,
    ipi: state.pagination.currentPage,
    ips: state.pagination.size,
  }
  matchScientificDemandApi(params).then(res => {
    const { status, data } = res
    if (status === 200) {
      state.fitAchievementList = data.result
      state.pagination.currentPage = data.pageNum
      state.pagination.pageSize = data.pageSize
      state.pagination.total = data.total
    }

  })
}

//根据id获取详情
const getDetailsById = () => {
  const params = {
    needId: state.achievementItem.id
  }
  getDetailsByIdApi(params).then(res => {
    const { status, data } = res
    if (status === 200) {
      state.detailsData = data
      state.abutmentList = data.group
    }
  })

}
//删除对接结果
const delAbutmentResult = () => {
  ElMessageBox.confirm('是否删除该数据?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    const params = {
      needId: state.detailsData.needId,
      supplyId: state.currentDelSupplyId
    }
    delAbutmentResultApi(params).then(res => {
      successHandle(res)
      getDetailsById()

    })
  })

}

//鼠标移入
const enterDemandItem = (item, index) => {
  state.currentDemandIndex = index
}

//鼠标离开
const leaveDemandItem = (item) => {
  state.currentDemandIndex = null
}

//删除成果方
const delAchievement = (item) => {
  state.currentDelSupplyId = item.supplyId
  delAbutmentResult()
}

//添加匹配成果
const addMatchAchievement = () => {
  isShowDialog.value = true
  matchScientificDemand()

}

//关掉弹窗
const closeDialog = () => {
  state.checkedList = []
  isShowDialog.value = false
  state.paramsList = []
  state.pagination.currentPage = 1
  state.pagination.size = 10
  state.pagination.total = 0
}
//确认添加需求
const add = () => {
  state.paramsList = state.paramsList.map(item => ({
    matchSourceType: 'SYSTEM_LIBRARY',
    similar: item.socre,
    supplyId: item.id,
    supplyTitle: item.name
  }))
  const params = {
    needContactPerson: state.detailsData.needContactPerson,
    needContactPhone: state.detailsData.needContactPhone,
    needId: state.detailsData.needId,
    needTitle: state.detailsData.needTitle,
    needType: state.detailsData.needType,
    matchSupplyModelList: state.paramsList
  }
  addMatchApi(params).then(res => {
    successHandle(res)
    getDetailsById()
    closeDialog()
  })
}
//条数
const handleSizeChange = (val) => {
  state.pagination.size = val

  matchScientificDemand()
}

//页数
const handleCurrentChange = (val) => {
  state.pagination.currentPage = val
  matchScientificDemand()

}

</script>

<style lang="scss" scoped>
.achievement-detail-container {
  :deep(.el-dialog__body) {
    padding: 0 20px;
  }
  .title {
    color: #333333;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 20px;
  }
  .info {
    width: 300px;
    height: 140px;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .item {
    font-size: 16px;
    display: flex;
    .key {
      color: #666666;
    }
    .value {
      flex: 1;
      font-weight: bold;
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; // 默认不换行；
    }
    .value.name {
      color: #00a2ff;
      cursor: pointer;
    }
  }
  .addBtn {
    background: #25d390;
    color: #fff;
    border: none;
    margin-bottom: 20px;
  }
  .demand {
    margin-top: 40px;
    .list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .list-item {
        width: 300px;
        height: 175px;
        border: 1px solid #e3e3e3;
        border-radius: 8px;
        margin: 0 20px 20px 0;
        position: relative;
        .box {
          width: 100%;
          height: calc(100% - 50px);
          padding: 25px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          box-sizing: border-box;
        }
        .del {
          width: 100%;
          height: 50px;
          background-color: rgba(0, 0, 0, 0.5);
          border-radius: 0px 0px 8px 8px;
          color: #fff;
          font-weight: bold;
          font-size: 16px;
          display: flex;
          justify-content: center;
          line-height: 51px;
          position: absolute;
          bottom: 0;
          left: 0;
          z-index: 999;
          cursor: pointer;
          .icon {
            align-self: center;
          }
          .word {
            margin-left: 10px;
          }
        }
      }
    }
  }
  .el-checkbox {
    width: calc((100% - 5px * 2) / 2);
    margin-right: 5px;
    :deep(.el-checkbox__label) {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .emptyData {
    width: 100%;
    text-align: center;
  }
  .pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>
